<template>
  <div id="payCheckList">
    <div class="title"></div>
    <div class="content">
      <div class="pay_checkList"  v-if="selectDateList">
        <div class="title">PayCheck List<span v-touch-ripple class="close_icon r" @click="back">X</span></div>
        <div class="content ">
          <el-row class="table_top_operator">
            <el-col :span="4">
              <el-select v-model="dateSelectModel" placeholder="select">
                <el-option
                  v-for="(item,key) in selectDateList" :key="key"
                  :label="item.showName"
                  :value="item.showName+'==!'+item.startDate+'=='+item.endDate ">
                </el-option>
              </el-select>
            </el-col>
          </el-row>

          <el-table v-if="tableData" ref="payTable"
                    :data="payCheckList"
                    border
                    :max-height="460"
                    emptyText="You did not have any payroll in the selected period"
                    @selection-change=""
                    @sort-change=""
                    @row-dblclick="tableDoubleClick"
                    @selection-change = ""
          >
            <!--序列号-->
            <el-table-column
              type="index"
              label="No."
              width="60">
            </el-table-column>
            <template v-for="(value,key) in tableData.column" >
              <el-table-column  :key="value.name"
                                :show-overflow-tooltip = 'true'
                                :prop="value.name"
                                :label="value.title"
                                height="auto"
                                :min-width="value.width?value.with:100"
                                :sortable = "value.isSortable ? 'custom':false"
                                inline-template
              >
            <span>
              <span v-if="value.name =='totalPay' || value.name =='netPay'">{{row['unit'] ?row['unit'] :""}}</span>
              {{row[value.name] ?row[value.name] :""}}
            </span>
              </el-table-column>
            </template>
          </el-table>
          <!--分页-->
          <div v-show="payCheckList" style="text-align:right;margin-top:10px" v-if="payCheckListPb&&payCheckListPb.pageDataCount>1">
            <el-pagination
              @size-change="tableChangePageSize"
              @current-change="tableChangePage"
              :current-page='parseInt(payCheckListPb.pageNo)'
              :page-sizes="[10, 15, 20, 30]"
              :page-size='parseInt(payCheckListPb.pageSize)'
              layout="total, sizes, prev, pager, next, jumper"
              :total='parseInt(payCheckListPb.pageDataCount)'>
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    components:{

    },
    data:function(){
      return{
       tableData:{
          column:[
            {title:'PAY DATE',name:'payDay'},
            {title:'NAME',name:'personName'},
            {title:'TOTAL PAY',name:'totalPay'},
            {title:'NET PAY',name:'netPay'},
            {title:'PAY METHOD',name:'payMethod'},
            {title:'CHECK NUMBER',name:'checkMember'},
          ],
       },
       dateSelectModel:null,
       dateSelect:{
         start:null,
         end:null
       },
        page:{
          "pageNo":"1",
          "pageSize":"10"
        }
      }
    },
    created:function(){
      this.$store.dispatch('getPayCheckSelectDate',{param:{}});
    },
    activated:function(){
      //this.$store.dispatch('getPayCheckSelectDate',{param:{}});
    },
    computed:{
      selectDateList(){
        /*if(this.$store.getters.selectDateList){
          var data = this.$store.getters.selectDateList;
          this.dateSelectModel = data[0].showName +'==!' + data[0].startDate+'=='+data[0].endDate
        }*/
        return this.$store.getters.selectDateList;
      },
      payCheckList(){
       return this.$store.getters.payCheckList
      },
      payCheckListPb(){
        return this.$store.getters.payCheckListPb
      }
    },
    watch:{
      dateSelectModel:function(newValue){
        if(!newValue) return;
        var value =  newValue.split('==!')[1];
        this.getPayCheckList(value);
      }
    },
    mounted:function(){
    },
    methods:{
      back:function(){
        this.$router.push('/payRoll/payRollCenter');
      },
      getPayCheckList(value){
        this.dateSelect.start = value.split("==")[0];
        this.dateSelect.end = value.split("==")[1];
        this.$store.dispatch('getPayCheckList',{startDate:this.dateSelect.start,endDate:this.dateSelect.end,pageNo:this.page.pageNo,pageSize:this.page.pageSize,});
      },
      tableDoubleClick(row){
        var personId = row.personId;
        var payInfoId = row.payInfoId;
        this.$router.push('/payRoll/payRollCenter/payCheckList/PayCheckDetail/'+payInfoId +"?personId="+personId);
      },
      tableChangePageSize(pageSize){
        this.page.pageSize = pageSize;
        this.getPayCheckList(this.dateSelectModel);
      },
      tableChangePage(pageNo){
        this.page.pageNo = pageNo;
        this.getPayCheckList(this.dateSelectModel);
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  rel="stylesheet/scss"  type="text/css" lang="scss" scoped>

  @import "../../assets/css/variable";
    #payCheckList{
      >.content{
        padding: 0;
      }
    }
    .pay_checkList {
      min-height: 100%;
      background-color: #fff;
      .title {
        line-height: 80px;
        background-color: $activeColor;
        padding: 0 20px;
        font-size: 20px;
        color:#fff;
      }
      .content {
        padding: 20px;
        margin-bottom: 20px;
        .table_top_operator{
          margin-bottom: 10px;
        }
      }
    }
</style>
